<template>
    <div class="unlock_page">
        <div>
            <topnav pageindex="1"></topnav>
        </div>
        <div class="choose_tab">
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="12">
                                <div class="lb">COIN:</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="seldiv">
                                    <el-select v-model="coinType" placehoder="" @change="coinChange">
                                        <el-option
                                            v-for="item in coins"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="14">
                        <el-row>
                            <el-col :span="4">
                                <div class="lb">TIME:</div>
                            </el-col>
                            <el-col :span="9">
                                <div>
                                    <el-date-picker
                                        v-model="chDate"
                                        type="date"
                                        placeholder=""
                                        :editable="false"
                                        :picker-options="dateOption">
                                    </el-date-picker>
                                </div>
                            </el-col>
                            <el-col :span="9">
                                <div>
                                    <el-time-picker
                                        is-range
                                        v-model="chTime"
                                        placehoder="">
                                    </el-time-picker>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <div class="secline">
                <el-row>
                    <el-col :span="4">
                        <div class="lb">
                            Account Address:
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="ipt">
                            <el-input v-model="minerAddr" placehoder="" icon="close" :on-icon-click="clearm"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="shdiv">
                            <el-button type="primary" icon="search" :loading="isload" @click="getData()">SEARCH</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="maindata" v-show="showmain">
            <div class="tbwrap">
                <el-table
                    :data="showData"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="miner"
                        label="miner"
                        style="width: 39%">
                    </el-table-column>
                    <el-table-column
                        prop="height"
                        label="height"
                        style="width: 20%">
                    </el-table-column>
                    <el-table-column
                        prop="rewards"
                        label="rewards"
                        style="width: 20%">
                    </el-table-column>
                    <el-table-column
                        prop="logTime"
                        label="logTime"
                        style="width: 20%">
                    </el-table-column>
                </el-table>
            </div>
            <div class="pgwrap">
                <el-pagination
                    @current-change="pageChange"
                    :current-page.sync="nowPage"
                    :page-size="20"
                    layout="prev, pager, next, jumper"
                    :total="totalNum">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import topnav from '@/components/common/topnav.vue';
    let tempcointype = "";
    export default {
        name: "unlock",
        data() {
            return {
                coinType: "",
                coins: ["ETH", "ETC", "EXP", "ZEC", "SC"],
                showmain: false,
                chDate: "",
                dateOption: {},
                chTime: "",
                minerAddr: "",
                isload: false,
                resData: [],
                showData: [],
                nowPage: 1,
                totalNum: 0
            }
        },
        methods: {
            getData: function() {
                let that = this;
                if(that.isload) return;
                let reqData = {};
                if(!that.coinType) return;
                if($.trim(that.minerAddr)) {
                    reqData.miner = that.minerAddr;
                }
                that.isload = true;
                if(that.chDate) {
                    let tempTime = that.chDate;
                    let reqTime = {
                        st: 0,
                        et: 0
                    };
                    let sth = 0;
                    let smin = 0;
                    let ssec = 0;
                    let enth = 23;
                    let enmin = 59;
                    let ensec = 59;
                    if(that.chTime && (that.chTime.length > 1)) {
                        sth = that.chTime[0].getHours();
                        smin = that.chTime[0].getMinutes();
                        ssec = that.chTime[0].getSeconds();
                        enth = that.chTime[1].getHours();
                        enmin = that.chTime[1].getMinutes();
                        ensec = that.chTime[1].getSeconds();
                    }
                    tempTime.setHours(sth);
                    tempTime.setMinutes(smin);
                    tempTime.setSeconds(ssec);
                    reqTime.st = tempTime.getTime();
                    tempTime.setHours(enth);
                    tempTime.setMinutes(enmin);
                    tempTime.setSeconds(ensec);
                    reqTime.et = tempTime.getTime();
                    reqData.startTime = reqTime.st;
                    reqData.endTime = reqTime.et;
                }
                let reqUrl = "unlocklog/" + that.coinType.toLowerCase() + "/list";
                that.api.get({
                    url: reqUrl,
                    data: reqData,
                    callback: function(data) {
                        that.resData = [];
                        that.showData = [];
                        that.nowPage = 1;
                        that.totalNum = 0;
                        if(data.code == 0) {
                            var res = data.data;
                            for(var i = 0; i < res.length; i ++) {
                                that.resData.push({
                                    miner: res[i].miner,
                                    height: res[i].height,
                                    rewards: ((res[i].rewards)/(Math.pow(10,9))),
                                    logTime: that.api.dateFormat(res[i].logTime, "yyyy-MM-dd hh:mm:ss")
                                });
                            }
                            that.showData = that.resData.slice(0, 20);
                            that.totalNum = that.resData.length;
                        }
                        that.isload = false;
                        that.showmain = true;
                    },
                    failback: function() {
                        that.resData = [];
                        that.showData = [];
                        that.nowPage = 1;
                        that.totalNum = 0;
                        that.isload = false;
                        that.showmain = true;
                    }
                });
            },
            pageChange: function(val) {
                let that = this;
                let stPage = (parseInt(that.nowPage) - 1) * 20;
                let enPage = stPage + 20;
                that.showData = that.resData.slice(stPage, enPage);
            },
            coinChange: function(newcointype) {
                if(newcointype != tempcointype) {
                    this.chDate = "";
                    this.dateOption = {};
                    this.chTime = "";
                    this.minerAddr = "";
                    this.isload = false;
                    this.showmain = false;
                    this.resData = [];
                    this.showData = [];
                    this.nowPage = 1;
                    this.totalNum = 0;
                    tempcointype = newcointype;
                }
            },
            clearm: function(ev) {
                this.minerAddr = "";
            }
        },
        mounted: function() {
            this.api.get({
                url: "checklogin",
                data: {},
                callback: function(data) {}
            });
        },
        components: {
            topnav
        }
    }
</script>
<style>
    .unlock_page .choose_tab {
        margin: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #e0e0e0;
    }
    .unlock_page .choose_tab .lb {
        text-align: right;
        line-height: 35px;
    }
    .unlock_page .choose_tab .secline {
        margin-top: 25px;
    }
    .unlock_page .choose_tab .secline .ipt,.unlock_page .seldiv {
        margin-left: 24px;
    }
    .unlock_page .choose_tab .shdiv {
        text-align: left;
        margin-left: 48px;
    }
    .unlock_page .el-table th>.cell {
        text-align: center;
    }
    .unlock_page .maindata .tbwrap {
        margin: 25px;
    }
    .unlock_page .pgwrap {
        margin: 10px;
        text-align: right;
    }
</style>